<template>
  <view class="page">
    <!-- head -->
    <view class="head">
      <text>您的邀请码</text>
      <text class="code">{{ user.invitationCode }}</text>
    </view>
    <image class="qrcode" :src="qrcodeImg" />
    <view class="share-list"> </view>
    <canvas class="main-canvas" id="firstCanvas" canvas-id="firstCanvas" style="width: 375px; height: 750px"></canvas>
  </view>
</template>
<script>
// canvas操作相关
import _canvas from "@/uni_modules/fan-canvas/canvasUtils";
import { qrcodeCanvas } from "@/uni_modules/fan-canvas/plugins/utils";
import { getUserInfo } from "@/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      // 二维码
      qrcodeImg: "",
      user: {},
      table_num: "",
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.table_num = uni.getStorageSync("table_num");
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      let res = await getUserInfo();
      if (res.code == 200) {
        // console.log("res", res);
        this.user = res.data;
        this.createQrcode();
      }
    },
    // 创建二维码
    createQrcode(URL = "http://ddsdcweb.web.dlsyv.cn/#/pages/login/register") {
      const _this = this;
      let params = `?invitationCode=${this.user.invitationCode}&table_num=${this.table_num}`;

      qrcodeCanvas("firstCanvas", URL + params, 400, 400);
      const ctx = uni.createCanvasContext("firstCanvas");

      ctx.setFillStyle("white");
      ctx.draw(true, function () {
        uni.canvasToTempFilePath(
          {
            width: 200,
            height: 200,
            canvasId: "firstCanvas",
            success(res) {
              // 二维码本地图
              _this.qrcodeImg = res.tempFilePath;
            },
          },
          _this
        );
      });
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background-color: #f6b68f;
}

.page {
  width: 750rpx;
  min-height: 1477rpx;

  background-image: url(http://verification.dlsyv.cn/ddsdc/share110101112.jpg);
  background-size: 750rpx, 1333rpx;
  background-repeat: no-repeat;
  background-color: #f6b68f;

  position: relative;

  .head {
    width: 690rpx;
    height: 60rpx;
    background-color: #ffffff;
    margin: 20rpx 30rpx;
    line-height: 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 12rpx;
    border-radius: 6rpx;

    .code {
      color: #DF4D28;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
  }

  .qrcode {
    width: 200rpx;
    height: 200rpx;

    position: absolute;
    top: 482rpx;
    right: 274rpx;
  }

  .left {
    width: 20rpx;
    height: 36rpx;
  }

  .ticket-head {
    width: 700rpx;
    height: 80rpx;

    border-radius: 20rpx;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    .label-id {
      box-sizing: border-box;
      padding: 0 30rpx;
      width: 100%;
      height: 100%;

      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;

      .label {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }

      .id {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }

  .share-ticket {
    width: 690rpx;
    height: 1095rpx;
    margin-top: 40rpx;

    border-radius: 20rpx;

    box-sizing: border-box;
    padding: 40rpx 30rpx 53rpx 30rpx;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    position: relative;

    span {
      color: #ffffff;
      line-height: 80rpx;
      font-size: 36rpx;
      font-weight: 800;
    }

    .ticket-head {
      width: 100%;
      height: 58rpx;

      background-color: #ffffff;

      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;

      image {
        width: 56rpx;
        height: 56rpx;
      }

      .label-id {
        height: 100%;

        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: flex-end;

        .label {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #175096;
        }

        .id {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }

    .image-box {
      width: 630rpx;
      height: 700rpx;
      border-radius: 30rpx;
      overflow: hidden;
      margin-top: 66rpx;

      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      align-items: center;

      .swiper-dots {
        height: 10rpx;

        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        align-items: center;

        .dot {
          width: 10rpx;
          height: 10rpx;
          margin: 0 8rpx;
          border-radius: 5rpx;
        }

        .active {
          background: #0856da;
        }

        .in-active {
          background: rgba(8, 86, 218, 0.5);
        }
      }

      .swiper-image {
        width: 630rpx;
        height: 630rpx;
        border-radius: 30rpx;
      }
    }
  }

  .share-list {
    width: 550rpx;
    height: 125rpx;
    margin-top: 79rpx;

    position: absolute;
    bottom: 30rpx;
    left: 30rpx;

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    /* #ifndef MP-WEIXIN */
    .item {
      background-color: transparent;

      min-width: 120rpx;
      height: 125rpx;

      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      align-items: center;

      image {
        width: 82rpx;
        height: 82rpx;
      }

      text {
        height: 24rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #f7f7f7;
      }
    }

    /* #endif */

    /* #ifdef MP-WEIXIN */
    .item {
      background-color: transparent;

      min-width: 120rpx;
      height: 150rpx;

      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;

      image {
        width: 82rpx;
        height: 82rpx;
      }

      text {
        height: 24rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #f7f7f7;
      }
    }

    .item::after {
      border: none;
      outline: none;
    }

    .item::before {
      border: none;
      outline: none;
    }

    /* #endif */
  }

  .main-canvas {
    margin-top: 40rpx;
    background-color: #175096;

    position: fixed;
    top: 0;
    left: -750rpx;

    visibility: hidden;
  }
}
</style>
